<template>
  <div class="common-upload">
    <a-upload-dragger
      v-if="isDragger"
      :action="url"
      :multiple="multiple"
      withCredentials
      :list-type="listType"
      :before-upload="beforeUpload"
      :file-list="fileList"
      @change="uploadStatusChange"
      :headers="headers"
    >
      <p class="ant-upload-drag-icon">
        <a-icon type="inbox" />
      </p>
      <p class="ant-upload-text" style="color: #40a9ff">
        {{content}}
      </p>
      <p class="ant-upload-text">
        点击或者拖拽文件来上传
      </p>
    </a-upload-dragger>

    <a-upload
      v-else
      :action="url"
      :multiple="multiple"
      withCredentials
      :list-type="listType"
      :before-upload="beforeUpload"
      :file-list="fileList"
      @change="uploadStatusChange"
      :headers="headers"
    >
      <el-button type="primary">点击上传</el-button>
    </a-upload>
  </div>
</template>
<script>
    import { getToken } from '@/utils/auth'

    export default {
        name: 'CommonUpload',
        props: {
            url: {
                type: String,
                default: ''
            },
            maxNum: {
                type: Number,
                default: null
            },

            maxCount: {
              type: Number,
              default: null
            },
            maxSize: {
                type: Number,
                default: 200
            },
            value: {
                type: Array,
                default: [],
            },
            multiple: {
                type: Boolean,
                default: true
            },
            content: {
                type: String,
                default: '上传文件',
            },
            isDragger: {
                type: Boolean,
                default: true
            },
            listType: {
                type: String,
                default: 'picture'
            }
        },
        created() {
            // 组件创建时候 将父组件value 传给 fileList
            this.fileList = this.value
        },
        watch:{
            value(val) {
                // 监听 父组件value, 动态赋值给 fileList
                this.fileList = val
              console.info(1111111+val)
            },
            fileList(val) {
                // 监听 fileList, 使用$emit 将消息提交给父组件
                this.$emit('input', val)
            }
        },
        data() {
            return {
                headers: {
                    "X-Token": getToken(),
                },
                fileList: [],
            }
        },
        methods: {
            beforeUpload(file) {
                if (file.size > this.maxSize * 1024 * 1024) {
                    this.$message({ message: '上传文件大小不能超过'+this.maxSize+'M', type: 'warning' })
                    return false
                }else {
                    if (this.maxNum&&this.fileList.length>=this.maxNum) {
                        this.$message({ message: '上传文件数量超过限制:'+this.maxNum, type: 'warning' })
                        return false
                    }
                    if (this.maxCount == 1) {
                      this.fileList = []
                    }
                }
            },
            uploadStatusChange(info) {
                if (info.file.status === 'uploading' || (info.file.response&&info.file.response.error === 0)) {
                    let fileList = [...info.fileList]
                    fileList = fileList.map(file => {
                        if (file.response) {
                            file.url = file.response.url
                            file.id = file.response.fileId
                            file.name = file.response.fileName
                        }
                        return file
                    })
                    this.fileList = fileList
                }else if(info.file.status === 'removed') {
                    let fileList = [...info.fileList]
                    fileList.map(file => {
                        if(file.status != 'removed') {
                            fileList.push(file)
                        }
                    })
                    this.fileList = fileList
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
  .common-upload {

  }
</style>
